<!-- 只写模板文件名，则加载整个页面 -->
<div th:replace="public/header"></div>
<body ontouchstart>
<!--顶部搜索-->
<header class='weui-header'>
    <div class="weui-search-bar" id="searchBar">
        <form class="weui-search-bar__form" th:action="@{/user/pro_list}" method="get">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" id="searchInput" name="keywords"
                       placeholder="搜索您想要的商品" required>
                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
            </div>
            <label class="weui-search-bar__label" id="searchText"
                   style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                <i class="weui-icon-search"></i>
                <span>搜索您想要的商品</span>
            </label>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
    </div>
</header>
<!--主体-->
<div class='weui-content'>
    <!--顶部轮播-->
    <div class="swiper-container swiper-banner">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><a href="pro_info.html"><img th:src="@{/static/consumer/upload/ban1.jpg}"/></a>
            </div>
            <div class="swiper-slide"><a href="pro_list.html"><img th:src="@{/static/consumer/upload/ban2.jpg}"/></a>
            </div>
            <div class="swiper-slide"><a href="pro_info.html"><img th:src="@{/static/consumer/upload/ban3.jpg}"/></a>
            </div>
            <div class="swiper-slide"><a href="pro_list.html"><img th:src="@{/static/consumer/upload/ban4.jpg}"/></a>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <!--图标分类-->
    <div class="weui-flex wy-iconlist-box">
        <div class="weui-flex__item"><a href="pro_list.html" class="wy-links-iconlist">
            <div class="img"><img th:src="@{/static/consumer/images/icon-link1.png}"></div>
            <p>精选推荐</p></a></div>
        <div class="weui-flex__item"><a href="pro_list.html" class="wy-links-iconlist">
            <div class="img"><img th:src="@{/static/consumer/images/icon-link2.png}"></div>
            <p>酒水专场</p></a></div>
        <div class="weui-flex__item"><a href="all_orders.html" class="wy-links-iconlist">
            <div class="img"><img th:src="@{/static/consumer/images/icon-link3.png}"></div>
            <p>订单管理</p></a></div>
        <div class="weui-flex__item"><a href="Settled_in.html" class="wy-links-iconlist">
            <div class="img"><img th:src="@{/static/consumer/images/icon-link4.png}"></div>
            <p>商家入驻</p></a></div>
    </div>
    <!--新闻切换-->
    <div class="wy-ind-news">
        <i class="news-icon-laba"></i>
        <div class="swiper-container swiper-news">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><a href="news_info.html">热烈祝贺伟义商城成功热烈祝贺伟义商城成功上线热烈祝贺伟义商城成功上线上线</a></div>
                <div class="swiper-slide"><a href="news_info.html">蓝之蓝股份成公司上市</a></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <a href="news_list.html" class="newsmore"><i class="news-icon-more"></i></a>
    </div>
    <!--精选推荐-->
    <div class="wy-Module" style="display: none">
        <div class="wy-Module-tit"><span>精选推荐</span></div>
        <div class="wy-Module-con">
            <div class="swiper-container swiper-jingxuan" style="padding-top:34px;">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><a href="pro_info.html"><img
                            th:src="@{/static/consumer/upload/jingxuan1.jpg}"/></a></div>
                    <div class="swiper-slide"><a href="pro_info.html"><img
                            th:src="@{/static/consumer/upload/jingxuan2.jpg}"/></a></div>
                    <div class="swiper-slide"><a href="pro_info.html"><img
                            th:src="@{/static/consumer/upload/jingxuan3.jpg}"/></a></div>
                    <div class="swiper-slide"><a href="pro_info.html"><img
                            th:src="@{/static/consumer/upload/jingxuan4.jpg}"/></a></div>
                    <div class="swiper-slide"><a href="pro_info.html"><img
                            th:src="@{/static/consumer/upload/jingxuan3.jpg}"/></a></div>
                    <div class="swiper-slide"><a href="pro_info.html"><img
                            th:src="@{/static/consumer/upload/jingxuan1.jpg}"/></a></div>
                </div>
                <div class="swiper-pagination jingxuan-pagination"></div>
            </div>
        </div>
    </div>
    <!--酒水专场-->
    <div class="wy-Module" style="display: none">
        <div class="wy-Module-tit"><span>酒水推荐</span></div>
        <div class="wy-Module-con">
            <div class="swiper-container swiper-jiushui" style="padding-top:34px;">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><a href="pro_info.html"><img
                            th:src="@{/static/consumer/upload/jingxuan1.jpg}"/></a></div>
                </div>
                <div class="swiper-pagination jingxuan-pagination"></div>
            </div>
        </div>
    </div>
    <!--猜你喜欢-->
    <div class="wy-Module">
        <div class="wy-Module-tit-line"><span>猜你喜欢</span></div>
        <div class="wy-Module-con">
            <ul class="wy-pro-list clear">
                <li th:each="entries,stat:${goods}">
                    <a th:href="@{'/Goods/pro_info/'+${entries['uuid']}}">
                        <div class="proimg"><img th:src="${entries['images']}"></div>
                        <div class="protxt">
                            <div class="name" th:text="${entries['name']}"></div>
                            <div class="wy-pro-pri">¥<span th:text="${entries['price']}"></span></div>
                        </div>
                    </a>
                </li>
            </ul>
            <div class="morelinks"><a href="pro_list.html">查看更多 >></a></div>
        </div>
    </div>
</div>

<!--底部导航-->
<div th:replace="public/bottom_tab"></div>

<!--JS-->
<div th:replace="public/bottom_js"></div>

<script>
    $(".swiper-banner").swiper({
        loop: true,
        autoplay: 3000
    });
    $(".swiper-news").swiper({
        loop: true,
        direction: 'vertical',
        paginationHide: true,
        autoplay: 30000
    });
    $(".swiper-jingxuan").swiper({
        pagination: '.swiper-pagination',
        loop: true,
        paginationType: 'fraction',
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 2
    });
    $(".swiper-jiushui").swiper({
        pagination: '.swiper-pagination',
        paginationType: 'fraction',
        loop: true,
        slidesPerView: 3,
        slidesPerColumn: 2,
        paginationClickable: true,
        spaceBetween: 2
    });
</script>
</body>
</html>
